<!-- 线上合同 -->
<template>
	<view class="contract-container">
    <t-header @back="clickNavBackFn">线上合同</t-header>
		<!-- content -->
		<view class="contract-content">
			<view class="padding-sm">
				<view class="cell" v-for="(row,idx) in contracts" :key="idx">
					<image src="/static/images/icons/rrrr2.webp" mode="widthFix" />
					<text class="flex-sub">{{row.name}}</text>
					<view class="cell-r" v-if="row.status == 1">
						<tui-button @click="goContract(row)" :size="26" type="green" width="120rpx" height="60rpx">已签</tui-button>
					</view>
					<view class="cell-r" v-else>
						<tui-button @click="goContract(row)" :size="26" type="changcheng" width="120rpx" height="60rpx">签订</tui-button>
					</view>
				</view>
			</view>
		</view>
		
		<tui-dialog :buttons="buttons" :show="showAddr" title="合同地址" @close="close" @click="goContract2">
		 <template v-slot:content>
		 	<tui-divider dividerColor="red">请输入身份证地址</tui-divider>
			<tui-input placeholder="请输入身份证地址" clearable v-model="contract_addr"></tui-input>
		 </template>
		</tui-dialog>
		
		<!-- #ifdef APP || APP-PLUS -->
		<view class="padding-top-app" v-if="showWeb">
			<web-view :src="url" :webview-styles="webViewStyle" ></web-view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
			<view class="padding-top" v-show="showWeb">
				<!-- <tui-icon name="back" color="#000" size="48"></tui-icon> -->
				<web-view :src="url"></web-view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app';

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {getUserContracts, createContract} from '@/api/user.js';

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const contracts = ref([]);
const curr_contract = ref({});
const contract_addr = ref('');
const url = ref('');
const showAddr = ref(false);
const showWeb = ref(false);
const buttons = ref([{
	text: '取消'
 }, {
	text: '确定',
	color: '#586c94'
}]);
const webViewStyle = ref({
	width:"100%",
	height:"500px",
	top:"70px"
});

onLoad(() => {
	getUserContractsFn();
});

onShow(() => {
	getUserContractsFn();
});

const getUserContractsFn = () => {
	getUserContracts().then(res=>{
		console.log(res)
		if(res.code == 1){
			contracts.value = res.data
		}else{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	})
};

const goContract = (item) => {
	// console.log(item)
	if(item.id != ''){
		openContractWindow(item.id)
	}else{
		curr_contract.value = {type:item.type,id:item.id}
		if (item.type == 1) {						
			showAddr.value = true
		} else{
			goContract2({index:1});
		}
	}
};

const openContractWindow = (id) => {
	uni.navigateTo({
		url:"/pages/contracts/contract?id="+id,
		animationType: 'pop-in',
	})
};

const goContract2 = (e) => {
	close()
	if(e.index == 1){
		if(curr_contract.value.type == 1 && contract_addr.value == ''){
			uni.showToast({title:"请设置身份证地址",icon:"error"});
			return false;
		}
		curr_contract.value.address = contract_addr.value
		createContract(curr_contract.value).then(res=>{
			uni.showToast({title:res.msg,icon:"none"});
			// console.log(res)
			if (res.code == 1) {
				let id = res.data.id
				openContractWindow(id)
			}
		})					
	}
};

const close = () => {
	showAddr.value = false
};
</script>

<style lang='scss' scoped>
.contract-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.contract-content {
		overflow-y: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 18rpx 26rpx;
	}
}

.boxshow{
		box-shadow: 0 0rpx 16rpx rgba(0, 0, 0, 0.14);
		border-radius: 16rpx
	}
	.cell{
		@extend .boxshow;
		display: flex;align-items: center;
		padding:30rpx 20rpx;margin-top: 20rpx;
		image{width: 28rpx;height: 34rpx;margin-right: 20rpx;}
		
		.cell-r{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
	.padding-top-app{
			position: fixed;
			bottom: 0;
			height: calc(100vh - 50px);
			width: 100%;
			left: 0;
			
	}
	.padding-top{
		    position: fixed;
		    top: 24px;
		    height: 100vh;
		    width: 100%;
		    left: 0;
			
			::v-deep(web-view) {
				height: 100vh;
				    padding: 0;
			}
	}
	// min-height: 55vh;
	.pagev{box-sizing: border-box;min-height: 25vh;	}
</style>
